<template>
  <div>
    <div class="manager-top">
      <div class="manager-top-left">
        欢迎您,用户{{userInfo.accountName}}
      </div>
      <div class="manager-top-right">
        <el-button type="text" @click="openDialog">修改密码</el-button>
        <el-button type="text" @click="logout">退出登录</el-button>
      </div>
    </div>
    <div class="manager-left">
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <menusComponent :menuList="menuList"></menusComponent>
      </el-menu>
    </div>
    <div class="manager-right">
      <router-view></router-view>
    </div>
    <el-dialog title="修改密码" @close="dialogClose" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="changePasswordForm" style="text-align: center;" status-icon :rules="rules" ref="passwordForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="changePasswordForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input type="password" v-model="changePasswordForm.checkPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="changePassword('changePasswordForm')" >提交</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import menusComponent from './Menus.vue'
  export default {
    name: "Manager",
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.changePasswordForm.checkPassword !== '') {
            this.$refs.passwordForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.changePasswordForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        userInfo: null,
        menuList: [],
        dialogVisible: false,
        changePasswordForm:{
          password: "",
          checkPassword:""
        },
        rules: {
          password: [
            { validator: validatePass, trigger: 'blur' },
            {pattern: /^\w{6,15}$/,message: '请输入6-15长度的密码'}
          ],
          checkPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      changePassword(passwordForm){
        this.$refs.passwordForm.validate((valid) => {
          if (valid) {
            this.$http.post("changeAccountPassword",
            {accountId:this.userInfo.accountId,accountPass:this.changePasswordForm.password}).then(resp=>{
              if(resp.data.code==200){
                this.$message({message:resp.data.msg,type:'success',duration:1000});
                this.logout();
              }else{
                this.$message.error({message:resp.data.msg,duration:1000});
              }
            })
          }
        })
      },
      dialogClose() {
        this.changePasswordForm.checkPassword = "";
        this.changePasswordForm.password = "";
      },
      openDialog() {
        this.dialogVisible = true;
      },
      handleClose() {
        this.dialogVisible = false;
      },
      logout() {
        this.$http.post("logout");
      },
      findMenus() {
        this.$http.get("findMenus", {
          params: {
            accountId: this.userInfo.accountId
          }
        }).then(resp => {
          this.menuList = resp.data.data;
        })
      }
    },
    created() {
      this.userInfo = JSON.parse(localStorage.getItem("com.woniuxy.loginUser"))
      this.findMenus()
    },
    components: {
      menusComponent
    }
  }
</script>

<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  .manager-top-left {
    padding: 30px;
    float: left;
    height: 100px;
    width: 300px;
  }

  .manager-top-right {
    padding: 30px;
    float: right;
    right: 0;
    width: 300px;
    height: 100px;
  }

  .manager-top {
    left: 0;
    right: 0;
    position: absolute;
    height: 100px;
    background-color: aliceblue;

  }

  .manager-left {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200px;

  }

  .manager-right {
    position: absolute;
    top: 100px;
    left: 200px;
    right: 0;
    bottom: 0;

  }
</style>
